<!-- 打新纪录 -->
<template>
	<view class="sg-container">
    <t-header @back="clickNavBackFn">打新纪录</t-header>
		<!-- description -->
		<view class="sg-description">我的新股</view>
		<!-- content -->
		<view class="sg-content">
			<!-- tabs -->
			<view class="sg-content-tabs">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					@click="clickTabItemFn(index)"
					class="sg-content-tab"
					:class="{'sg-content-tab-selected': tabIndex === index}"
				>{{ item.name }}</view>
			</view>
			<!-- components -->
			<view class="sg-content-comp">
				<mescroll-uni
					:height="`${height}rpx`"
					:down="downOption"
					:up="upOption"
					@init="mescrollInit"
					@down="downCallback"
					@up="upCallback"
				>
					<tui-list-cell v-for="(item, index) in list" :key="index" class="margin-top-xs" padding="10rpx 0">
						<view class="flex space_between padding-lr padding-tb-xs">
							<view class="" :style="{fontSize:item.codejson.size+'rpx',color:item.codejson.color}">
								{{item.name}}
							</view>
							<view class="" :style="{fontSize:item.tag.size+'rpx',color:item.tag.color}">
								{{item.status_txt}}
							</view>
						</view>
						<view class="flex space_between padding-xs border-top">
							<view class="col-4 text-center">
								<view class="" >申购代码</view>
								<view class="text-nomal margin-top-xs" >{{item.code}}</view>
							</view>
							<view class="col-4 text-center">
								<view class="">发行价</view>
								<view class="text-nomal margin-top-xs">{{item.sg_fx_price}}</view>
							</view>
							<view class="col-4 text-center">
								<view class="" >数量（股）</view>
								<view class="text-nomal margin-top-xs" >{{item.zq_num||0}}</view>
							</view>
						</view>
						<view class="flex space_between padding-xs border-bottom">
							<view class="col-4 text-center">
								<view class="">上市时间</view>
									<view class="text-nomal margin-top-xs">
									{{item.sg_ss_date!='0000-00-00'?item.sg_ss_date:'未公布'}}</view>
							</view>
							<view class="col-4 text-center text-red" v-if="item.status==1">
								<view class="" >{{item.renjiao==0?'剩余缴款':'已认缴'}}</view>
								<view class="text-nomal margin-top-xs ">
									{{item.renjiao==0?item.sy_renjiao:item.zq_money}}
								</view>
							</view>
						</view>
						<view class="flex justify-between align-center padding-sm">
							<view class="text-gray text-sm">
								{{item.createtime_txt}}
							</view>
							<tui-button
								v-if="item.status==1&&item.renjiao==0&&kq_zdrj==1"
								width="150rpx"
								height="50rpx"
								shape="circle"
								type="theme"
								:size="26"
								@click="openPaymentopenPayment(item)"
							>去认缴</tui-button>
						</view>
					</tui-list-cell>
				</mescroll-uni>
				
				<tui-modal
					:show="renjiaoModel"
					@click="payment"
					@cancel="hide6"
					title="提示"
					content="确定认缴吗？"
					:size="32"
					:button="button6"
				></tui-modal>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, nextTick, inject} from 'vue';
import {onShow, onLoad, onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

const tui = inject('tui');

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {getMyNew} from '@/api/user.js';

// utils
import http from '@/utils/http.js';

const height = ref(0);

onLoad((options) => {
	height.value = 1220;
	
	if(options.status){
		tabIndex.value = options.status * 1;
	}
	
	setTimeout(() => {
		getMescroll().resetUpScroll();
	}, 300);
});

// tab index
const tabIndex = ref(0);
// tabs
const tabs = [{name: '申购中'}, {name: '中签'}, {name: '未中签'}];

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

// tab item click事件
const clickTabItemFn = (index) => {
		tabIndex.value = index;
		
		setTimeout(() => {
			getMescroll().resetUpScroll();
		}, 300);
};

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

// 列表数据
const list = ref([]);
const kq_zdrj = ref(0);

const upCallback = (mescroll) => {
	//联网加载数据
	getMyNew({
		page: mescroll.num,
		status: tabIndex.value,
		size: mescroll.size
	}).then(res=>{
		// this.pageInit= true
		kq_zdrj.value = res.data.kq_zdrj
		if(mescroll.num==1) list.value=[]
		list.value = list.value.concat(res.data.dxlog_list)
		mescroll.endSuccess(res.data.dxlog_list.length);
	});
};

const activeItem = ref(null);
const renjiaoModel = ref(false);
const button6 = [
	{text: '取消', type: 'gray'},
	{text: '确定', type: 'warning'}
];

const openPayment = (item) => {
	activeItem.value = item;
	renjiaoModel.value = true;
};

const hide6 = () => {
	renjiaoModel.value = false;
};

const payment = (e) => {
	let index = e.index;
	if (index === 0) {
		hide6();
		return;
	} 
	if(!activeItem.value) return
	http.post('/subscribe/renjiao_act',{
		data:{id:this.activeItem.id}
	}).then(res=>{
		if(res.code == 1){
			renjiaoModel.value=false
			tui.toast('认缴成功',1500,1).then(()=>{
				getMescroll().resetUpScroll();
			});
		}else{
			tui.toast(res.msg)
		}
	})
};
</script>

<style lang='scss' scoped>
.sg-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.sg-description {
		margin-bottom: 14rpx;
		color: #000000;
		font-size: 52rpx;
		font-weight: 400;
		font-family: PingFangSC, PingFang SC;
		text-align: center;
	}

	.sg-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 18rpx 26rpx;
		border-radius: 34rpx;
		
		.sg-content-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 124rpx;
			padding: 0 52rpx;
			border-radius: 17px 17px 0 0;
			background: linear-gradient( 180deg, #FFFFFF 0%, #F7E9E9 100%);
			
			.sg-content-tab {
				color: #8F8F8F;
				font-size: 38rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
				
				&.sg-content-tab-selected {
					position: relative;
					color: #3C3939;
					transition: all 0.2s linear;
					
					&::after {
						content: '';
						position: absolute;
						top: 64rpx;
						left: 50%;
						width: 58rpx;
						height: 8rpx;
						border-radius: 22rpx;
						background: #F74E51;
						transform: translateX(-50%);
					}
				}
			}
		}
	
		.sg-content-comp {
			flex: 1;
			
			::v-deep(mescroll-uni) {
				.empty-icon {
					width: 220rpx;
				}
			}
		}
	}
}

.space_between {
	justify-content: space-between;
}

.skity-top{
	position: sticky;
	top: 0;
	z-index: 99;
}
</style>